<template>
<div class="newslist-container">
    <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media" v-for="item in newslist" :key="item.id">
        <router-link :to="'/home/newsinfo/' + item.id" tag="a">
            <img class="mui-media-object mui-pull-left" :src="item.img_url" />
            <div class="mui-media-body">
            <p class="title">{{ item.title }}</p>
            <p class="mui-ellipsis">
                <span>{{ item.add_time | dataFormat }}</span>
                <span>点击：{{ item.click }}次</span>
            </p>
            </div>
        </router-link>
        </li>
  </ul>
</div>
  
</template>

<script>
export default {
    data(){
        return {
            newslist: []
        }
    },
    created(){
        this.getNewsList()
    },
    methods: {
        getNewsList(){
            this.$http.get('api/getnewslist').then(result => {
                if(result.body.status === 0){
                    this.newslist = result.body.message
                }else{

                }
            })
        }
    }
};
</script>

<style lang="scss" scoped>
    .mui-table-view{
        background-color:white;
        .mui-table-view-cell{
            border-bottom: 1px solid rgba(221,221,221, 0.9);
            border-radius: 6px;
            box-shadow: inset 0 -3px 5px #e4e4e4;
            .mui-media-object{
                border-radius: 5px;
                border: 1px solid rgba(221,221,221, 0.7);
            }
        }
        .title{
            font-size: 14px;
            color: #333;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .mui-ellipsis{
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            color: #226aff; 
        }
    }
</style>